<template>
    <Dialog :openVis="visible" width="60%" title="预警详情" @close="closeDialog" :maskClosable="false">
        <template #container>
            <BasicTable
                style="margin: 5px"
                ref="registerTable"
                class="table-container"
                :class="[themeType]"
                :key="visible"
                :columns="columns"
                :api="getEarlyWarningDetail"
            ></BasicTable>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { h, ref, watch } from 'vue';
    import { getEarlyWarningDetail } from '/@/components/body-d-left/left.api.ts';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const emit = defineEmits(['close']);
    const { visible, closeDialog, openDialog } = useDialog();
    const registerTable = ref(null);
    const props = defineProps({
        title: String,
    });
    const { themeType } = useTheme();
    const columns = [
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '单位名称',
            dataIndex: 'secondDepart',
            key: 'secondDepart',
        },
        {
            title: '部门名称',
            dataIndex: 'thirdDepart',
            key: 'thirdDepart',
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '事件类型',
            dataIndex: 'eventType_dictText',
            key: 'eventType_dictText',
        },
        {
            title: '异常值',
            dataIndex: 'dataValue',
            key: 'dataValue',
        },
        {
            title: '详细地址',
            dataIndex: 'address',
            key: 'address',
            customRender: ({ record }) => {
                return !record?.address ? h('div', { style: { color: 'red' } }, record?.gpsErrorMsg) : record?.address;
            },
            ellipsis: true,
        },
        {
            title: '预警时间',
            dataIndex: 'warnTime',
            key: 'warnTime',
        },
    ];
    watch(props, () => {
        registerTable.value?.getRecords();
    });
    defineExpose({
        openDialog,
    });
</script>

<style scoped lang="less"></style>
